<template>
  <div class="els-row">
    <label>{{ attrs.label }}</label>
    <div class="els__content">
      <Ele
        :attrs="attrs"
        v-model:checkedKeys="model[attrs.field]"
        v-model:value="model[attrs.field]"
        v-model:checked="model[attrs.field]"
        v-model:file-list="model[attrs.field]"
      >
        <template v-if="attrs.slotName" #[attrs.slotName]>
          <slot :name="attrs.slotName"></slot>
        </template>
      </Ele>
    </div>
  </div>
</template>
<script setup>
const props = defineProps({
  config: {
    type: Object,
    default: () => {
      return {
        label: {
          type: String,
          default: "",
        },
        value: {
          type: String,
          default: "",
        },
        field: {
          type: String,
          default: "",
        },
        clearable: {
          type: Boolean,
          default: true,
        },
      };
    },
  },
});
const attrs = ref({});
const model = ref({});

watch(
  () => props.config,
  (val) => {
    attrs.value = {
      ...val
    };
  },
  {
    immediate: true,
  }
);
</script>
<style scoped lang="scss">
.els-row {
  label {
    display: block;
    text-align: right;
    margin-right: 10px;
  }
  display: flex;
  align-items: center;
  .els__content {
    flex: 1;
  }
}
</style>
